<!DOCTYPE html>
<html lang="zh-cn" style="padding: 0;margin: 0;overflow: hidden;">
	<head>
		<meta charset="UTF-8">
		<title class="title">水力模型</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link
		  rel="stylesheet"
		  href="./css/vant.css"
		/>
		
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="./js/vue.js"></script>
		<script src="./js/vant.js""></script>
		<script src="./svg.js""></script>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
	</head>
	<body  style="padding: 0;margin: 0;overflow: hidden;">
		<div id="app" :style="{width:width+'px',height:height +'px',padding: 0,margin: 0,overflow:scale===1?'hidden':'scroll'}">
		<svg id= 'tiger' @touchstart="touchstart"  @touchmove="touchmove"  @touchend="touchend" @click="showPopup"
		    xmlns:xlink="http://www.w3.org/1999/xlink" :width="width*scale" :height="height*scale"
		    xmlns="http://www.w3.org/2000/svg"
		    xmlns:ev="http://www.w3.org/2001/xml-events" viewBox="0 0 4165 1600">
		   	</svg> 6+
		<image src="./image/arrow_left.png" class="arrow_left" @touchstart="back" style=" position: absolute;
				    top: 25px;
				    left: 20px;
				    height: 30px;
				    width: 30px;"/>
		<image src="./image/jia.png" class="jia" @touchstart="jia" style="  position: absolute;
				    bottom: 60px;
				    right: 20px;
				    height: 30px;
				    width: 30px;"/>
		<image src="./image/jian.png" class="jian" @touchstart="jian" style="  position: absolute;
				    bottom: 20px;
				    right: 20px;
				     height: 30px;
				     width: 30px;"/>
		<div style="height:1000px;" v-if="!width"></div>
		<van-popup v-model="show">		
				 <div style="width: calc(70vw - 40px);padding:20px;border-radius: 20px;">
					<div  style="font-weight: blod;font-size: 20px;margin-bottom: 10px;">{{name}}</div>
					<div v-if="type==1" style="display: flex;flex-wrap: wrap;line-height: 26px;">
						<div style="width: 33%;">校核洪水位高程</div>
						<div style="width: 50%;color: #606266;">{{a}}</div>
						<div style="width: 33%;">动态水位高程</div>
						<div style="width: 50%;color: #606266;">{{b}}</div>
						<div style="width: 33%;">死水位高程</div>
						<div style="width: 50%;color: #606266;">{{c}}</div>
						<div style="width: 33%;">取水口阀底高</div>
						<div style="width: 50%;color: #606266;">{{d}}</div>
					</div>
					<div v-if="type==2"  style="display: flex;flex-wrap: wrap;line-height: 26px;">
						<div style="width: 33%;">运行流量</div>
						<div style="width: 33%;color: #606266;">{{a}}</div>
						<div style="width: 33%;color: #606266;">{{b}}</div>
						<div style="width: 33%;">运行流速</div>
						<div style="width: 50%;color: #606266;">{{c}}</div>
					</div>
					<div v-if="type==3"  style="display: flex;flex-wrap: wrap;line-height: 26px;">
						<div style="width: 33%;">服务水头高程</div>
						<div style="width: 50%;color: #606266;">{{a}}</div>
						<div style="width: 33%;">电动阀阀前压力</div>
						<div style="width: 53%;color: #606266;">{{b}}</div>
						<div style="width: 33%;">管中心高程</div>
						<div style="width: 50%;color: #606266;">{{c}}</div>
					</div>
					<div v-if="type==4"  style="display: flex;flex-wrap: wrap;line-height: 26px;">
						<div style="width: 33%;">建设规模</div>
						<div style="width: 50%;color: #606266;">{{a}}</div>
						<div style="width: 33%;">运行流量</div>
						<div style="width: 33%;color: #606266;">{{b}}</div>
						<div style="width: 33%;color: #606266;">{{c}}</div>
						<div style="width: 33%;">进水水位高程</div>
						<div style="width: 50%;color: #606266;">{{d}}</div>
						<div style="width: 50%;color: #606266;">{{e}}</div>
					</div>
				</div>
			</van-popup> 
		</div>
		
		<script type="text/javascript">
		        new Vue({
		            el:'#app',
		            data:{
		                width:0,
		                height:0,
						scale:1,
						show:false,
						data:null,
						start:null,
						xx:null,
						pzhAuthorization:'',
						timer:null,
						type:0,
						name:"",
						a:'',
						b:'',
						c:'',
						d:'',
						e:'',
		            },
		            computed:{
		             
		            },
					beforeDestroy(){
						if(this.timer){
							clearInterval(this.timer)
						}
					},
					beforeCreate(){
						document.addEventListener('plusready', ()=> {
						       let a = plus.screen.resolutionHeight,
									b = plus.screen.resolutionWidth;
									this.width=a>b?a:b
									this.height=a<b?a:b
						},false); 
					},
					mounted(){
						let url=window.location.href
							this.pzhAuthorization=url.substring(url.indexOf('pzhAuthorization=')+17,url.length)
						let svg=document.getElementById('tiger')
						svg.innerHTML=getSvg()
						this.socket()
						this.initClick()
					},
		            methods:{
						initClick(){
							let that=this
							$('g[id^="shape"]').on("click", function() {//以shape开头的g
								var str =  '' ;
								var h =42;
								var c =$(this).attr("class");
								var t =$(this).find(".st1 tspan").html();
								var ss = (0.5+Math.random()/10).toFixed(2);
								var n= Number($(this).find(".st1 tspan").attr("code"));  //主要参数数据

								var oid = $(this).attr("id").replace('shape','table');
								var fwstgc =$("#"+oid).find(".fwstgc").html();
								var gzxsy =$("#"+oid).find(".gzxsy").html();
								var gzxgc =$("#"+oid).find(".gzxgc").html();
								var jsgm =$("#"+oid).find(".jsgm").html();
								var jsswgc =$("#"+oid).find(".jsswgc").html();
								var dn =$("#"+oid).find(".dn").html();
								if (c &&c=='origin') {
									that.type=1
									that.a='1137.37m'
									that.b=n+'m'
									that.c='1122m'
									that.d='1115m'
								}else if(c &&c=='valves'){
									that.type=2
									that.a=(n/3600).toFixed(3)+'m³/s'
									that.b=n+'m³/h'
									that.c='m/s'
								}else if(c &&c=='bleeders'){
									that.type=3
									that.a=(n/3600).toFixed(3)+'m³/s'
									that.b=n+'m³/h'
									that.c='m/s'
				
								}else if(c &&c=='waterWorks'){
									that.type=4
									that.a=jsgm
									that.b=(n/3600).toFixed(3)+'m³/s'
									that.c=n+'m³/h'
									that.d=jsswgc
									that.e=dn
								}
								that.name=t
								that.show=true
								
							})
						},
						socket(){
						let that=this

							let websocket = new WebSocket('wss://125.66.234.97:8443/panzhihua/WebSocketTarget?pzhAuthorization='+this.pzhAuthorization);
							websocket.onopen=()=>{
								console.log('websocaket链接成功');
								websocket.send('sendAllSbTarget()');
							this.timer=	setInterval(()=>{
									websocket.send('sendAllSbTarget()');
								},60000)
							}
							websocket.onmessage=function(msg){
            //console.log(msg.data);
            var res =JSON.parse(msg.data);
            if (!res.functionCode ||res.functionCode!='getAllSbTarget') {
                return;
            }
            let dbData=(JSON.parse(msg.data)).datas;
            var str ='';
			let Objs =$('g[id^="shape"]');
            let pressureArray=[];
			var alarmValue =1.2 ;//预警压力值 1.2Map =12公斤
			var normalValue = 0.85; //常量压力值
            $('g[id^="shape"]').each(function(){
                var  c = $(this).attr("class")
                var  sid = $(this).attr("id")
                var  mc = $(this).attr("masterCode")
                //var  n = (0.5+Math.random()/10).toFixed(2);
                var  n = 0;
                if (c &&c=='origin') {  		//水源地
                    n= 1126+ Number((Math.random()).toFixed(2))
                }else if(c &&c=='valves'){  //阀门组
                    //n =(0.1+Number(n/5)).toFixed(2)
                }else if(c &&c=='bleeders'){  //分水口
                    //n= (1120+Number(Math.random() * 10)).toFixed(2) ;
                }else if(c &&c=='waterWorks'){ //水厂
                    //n= (Number(n/2.5)).toFixed(2) ;
                }
                var ob =$(this).find(".st1 tspan")//.innerHTML = str
                var oid = $(this).attr("id").replace('shape','table');
                var tableTmp=$("#"+oid);
                var ss = (0.5+Math.random()/10).toFixed(2);
                var n2=(2 +ss*0.1).toFixed(2)
                var n3 =(ss*3600).toFixed(0)
                tableTmp.find(".yxll").text( n+'m³/s '+n3+'m³/h ')

                var n22= (1120+Number(Math.random() * 10)).toFixed(2)
                //水压赋值
                var  syCode = $(this).attr("gzxsyCode")

                if (syCode) { //svg 加了此参数
                    if (dbData[syCode]) {
                        n =Number(dbData[syCode].value).toFixed(3);
                        var transform =$(this).attr("transform")
                        var x =(transform).substring(10,transform.indexOf(','))
                        var y = (800-(n*400)).toFixed(2);// 1.5mpa  y=100  1mpa y=300
                        var alarm  = (800-(alarmValue*400)).toFixed(2); //预警线值
                        var normal = (800-(normalValue*400)).toFixed(2); //常量线值
                        pressureArray.push({'x': x ,'y':y,'alarm':alarm , 'normal':normal})
                        // 创建文字描述
                        that.createText(syCode,x,Number(y-20),Number(n).toFixed(2)+"Mpa",20,"#2440B3");
                    }
                }
                //运行流量 赋值
                var  yxllCode = $(this).attr("yxllCode")
                if (yxllCode) {
                    if (dbData[yxllCode]) {
                        n =Number(dbData[yxllCode].value).toFixed(1);
                    }
                }

                if (n=='0') {
                    tableTmp.find(".yxll").text( ' - m³/s  - m³/h ')
                    tableTmp.find(".gzxsy").text( ' - MPa ')
                }else {
                    tableTmp.find(".yxll").text( (n/3600).toFixed(2)+'m³/s '+n+'m³/h ')
                    tableTmp.find(".gzxsy").text( n +' MPa');
                }

                var gzxgc =tableTmp.find(".gzxgc").html()
                if (typeof(gzxgc) != "undefined" && gzxgc.indexOf('m')>=0) {
                    tableTmp.find(".fwstgc").text( Number(n*100+ Number(gzxgc.replace(/m/,''))).toFixed(2) +'m');
                }

                ob.attr("code",n); //暂存 主参数数据且socket scada 有数据
            });


            //画压力曲线
            //压力点位排序
            for(var i=0;i<pressureArray.length -1;i++  ){
                for (var j = 0; j < pressureArray.length-1-i; j++) {
                    if(pressureArray[j]>pressureArray[j+1]){
                        var tem = pressureArray[j];
                        pressureArray[j] =pressureArray[j+1]
                        pressureArray[j+1] =pressureArray[j]
                    }
                }
            }


            var pointsStr = '';
            var alarmStr = '';
            var normalStr = '';
            for(var i=0;i<pressureArray.length ;i++  ){
                pointsStr+=pressureArray[i].x+","+pressureArray[i].y+" "
                alarmStr+=pressureArray[i].x+","+pressureArray[i].alarm+" "
                normalStr+=pressureArray[i].x+","+pressureArray[i].normal+" "

                if(i==0){
                    that.createText("alarmText",pressureArray[i].x-20,pressureArray[i].alarm -20,alarmValue+"Mpa 预警线",30,"#D19A66");
                }
            }

            var  pressureLine = document.getElementById('pressureLine');
            if(!pressureLine){ //画压力线
                var pressureLine = document.createElementNS("http://www.w3.org/2000/svg", "polyline");  //创建polyline对象，即折线对象，如果需要创建其他类型图像，<span style="white-space:pre">												</span>//修改 第二个参数
                pressureLine.setAttribute("fill", "none");
                pressureLine.setAttribute("stroke", "#57faff");                                 //设置图像颜色
                pressureLine.setAttribute("stroke-width", "10");
                pressureLine.setAttribute("points", pointsStr);   			 //设置属性，表面的是折线经过的点的位置//设置线宽
                pressureLine.setAttribute("id","pressureLine")
                document.getElementById('page1').appendChild(pressureLine);   //添加到svg标签中
            }else{
                //pressureLine.setAttribute("points", "1143.48,500 1343.48,600 1643.48,300  ");    //设置属性，表面的是折线经过的点的位置
                pressureLine.setAttribute("points", pointsStr);
            }

            var  alarmLine = document.getElementById('alarmLine');
            //画预警线
            if(!alarmLine){ //
                var alarmLine = document.createElementNS("http://www.w3.org/2000/svg", "polyline");  //创建polyline对象，即折线对象，如果需要创建其他类型图像，<span style="white-space:pre">												</span>//修改 第二个参数
                alarmLine.setAttribute("fill", "none");
                alarmLine.setAttribute("stroke", "#D19A66");                                 //设置图像颜色
                alarmLine.setAttribute("stroke-dasharray", "20, 10, 5");                                 //设置图像颜色
                alarmLine.setAttribute("stroke-width", "5");
                alarmLine.setAttribute("points", alarmStr);   			 //设置属性，表面的是折线经过的点的位置//设置线宽
                alarmLine.setAttribute("id","alarmLine")
                document.getElementById('page1').appendChild(alarmLine);   //添加到svg标签中
            }else{
                //pressureLine.setAttribute("points", "1143.48,500 1343.48,600 1643.48,300  ");    //设置属性，表面的是折线经过的点的位置
                pressureLine.setAttribute("points", pointsStr);
            }

            // fullTable 赋值
            that.fullTableValue(dbData);
        }
              
                
			},
			createText(id,x,y,str,fontsize,color){
				var  text = document.getElementById(id);
				if(!text){
					var eleSvg = document.getElementsByTagName("svg")[0];
					var strNS = eleSvg.getAttribute("xmlns");
					var text = document.createElementNS(strNS, "text");
					document.getElementById('page1').appendChild(text);
					text.appendChild(document.createTextNode(str));//文本内容"你好"
					text.setAttribute("x",x);
					text.setAttribute("y",y);
					if( typeof(color) != "undefined"){
						text.setAttribute("stroke", color)
					}
					text.setAttribute("id",id)
					text.style.setProperty("font-family","simsun");//字体为宋体
					text.style.setProperty("font-size", ''+fontsize);
				}else{
					if (text.firstChild && text.firstChild.setData) {
						try {
							text.firstChild.setData(str);
						} catch (e) {
						}
					}
				}
			},
				fullTableValue( dbData) {
					console.log(dbData,'-----');
					$('.footTableValueClass').each(function () {
						var  targetName = $(this).attr("targetName")
						var  targetNameDw = $(this).attr("targetNameDw")
						var  n ="-";
						if (targetName) {
							if (dbData[targetName] &&dbData[targetName].value) {
								n =Number(dbData[targetName].value).toFixed(3);
								if (targetNameDw=='m³/h' ){
									$(this).text( (n/3600).toFixed(2)+"m³/s      "+Number(n).toFixed(1) + targetNameDw);
								}else {
									$(this).text( n + targetNameDw);
								}

							}
						}

					})
    			},
						touchstart(e){
							console.log(e)
							// console.log(e.touches.length)
							if(e.touches.length==2){
								this.start=this.getDistance(e.touches[0],e.touches[1]);
								console.log(this.start)
							}else{
								this.start=null
							}
						},
						touchmove(e){
							// console.log(e)
							// console.log(e.touches.length)
							if(this.start&&e.touches.length==2){
								 let scale=this.getDistance(e.touches[0],e.touches[1])/this.start   //*this.scale
								 if(scale>1){
									 scale=(scale-1)/50+1
								 }else if(scale<1){
									scale=1-(1-scale)/50
								 }
								 scale=scale*this.scale
								 if(scale>5){
									 this.scale=5
								 }else if(scale<1){
									 this.scale=1
								 }else{
									 this.scale=scale
								 }
							}
						},
						touchend(e){
							// console.log(e)
							// console.log(e.touches.length)
							// if(e.touches.length==2){
							// 	this.start=e.touches
							// }
						},
						getDistance(p1, p2) {
							 var x = p2.pageX - p1.pageX,
							      y = p2.pageY - p1.pageY;
							    return Math.sqrt((x * x) + (y * y));
					   },
		               showPopup(e){
						   if(e.path){
							//    console.log(e.path[0].id,e.path[1].id )
							   if(e.path[0].id.indexOf('shape')>-1||e.path[1].id.indexOf('shape')>-1){
							   		this.show=true
							   }
						   }else{
							//    if(e.target.parentElement.id.indexOf('shape')>-1||e.target.parentNode.id.indexOf('shape')>-1){
							//    		this.show=true
							//    }
						   }
					   },
					   jia(){
						   let dom=document.getElementById('app')
						   let left=dom.scrollLeft,
						   	width=dom.scrollWidth,
						   	top=dom.scrollTop,
						   	height=dom.scrollHeight,
						   	scale=this.scale;
						   
						  if(this.scale<5){
							  this.scale+=0.3
						  } 
						  if(this.scale>5){
							  this.scale=5
						  }
						  
						  if(this.scale==scale){
						  	return
						  }
						  setTimeout(()=>{
						  	let scrollLeft=0,
						  		scrollTop=0;
						  	if(left==0){
						  		scrollLeft=this.width*(this.scale-1)/2
						  	}else{
						  		scrollLeft=(left+this.width/2)/this.width/scale * this.width*this.scale - this.width/2
						  	}
						  	dom.scrollLeft=scrollLeft
						  	
						  	if(top==0){
						  		scrollTop=this.height*(this.scale-1)/2
						  	}else{
						  		scrollTop=(top+this.height/2)/this.height/scale * this.height*this.scale - this.height/2
						  	}
						  	dom.scrollTop=scrollTop
						  },10)
					   },
					   jian(){
						   let dom=document.getElementById('app')
						   let left=dom.scrollLeft,
						   	width=dom.scrollWidth,
						   	top=dom.scrollTop,
						   	height=dom.scrollHeight,
						   	scale=this.scale;
						   
						  if(this.scale>1){
							  this.scale-=0.3
						  } 
						  if(this.scale<1){
							  this.scale=1
						  }
						  
						  if(this.scale==scale){
						  	return
						  }
						  setTimeout(()=>{
						  	let scrollLeft=0,
						  		scrollTop=0;
						  		
						  		
						  	scrollLeft=(left+this.width/2)/this.width/scale * this.width*this.scale - this.width/2
						  	dom.scrollLeft=scrollLeft
						  	
						  	scrollTop=(top+this.height/2)/this.height/scale * this.height*this.scale - this.height/2
						  	dom.scrollTop=scrollTop
						  },10)
						  
					   },
					   back(){
							uni.navigateBack({
							    delta:1
							})
							plus.webview.currentWebview().close();
						}
		            },
		        })
		    </script>
			<!-- <style type="text/css" scoped>
				.arrow_left{
				    position: absolute;
				    top: 20px;
				    left: 20px;
				    height: 30px;
				    width: 30px;
				}
				.jia{
				    position: absolute;
				    bottom: 60px;
				    right: 20px;
				    height: 30px;
				    width: 30px;
				}
				.jian{
				    position: absolute;
				   bottom: 20px;
				   right: 20px;
				    height: 30px;
				    width: 30px;
				}
			</style> -->
	</body>
</html>
